<template>
    <div>
        <el-collapse>
            <el-collapse-item :title="nstr(deep, '&nbsp;&nbsp;&nbsp;&nbsp;') + '|' + enode.label">
                <!-- <div style="overflow: hidden; width: 90vw; text-overflow: ellipsis;">
                    {{nstr(deep, '&nbsp;&nbsp;&nbsp;&nbsp;')}}{{ enode.value }} -->
                <!-- <el-divider></el-divider> -->
                <div v-for="(child, index) in enode.children">
                    <div v-if="child.isRec" :key="index">
                        <ERecord :enode="child" :deep="deep + 1"></ERecord>
                    </div>
                    <div v-else>
                        <div style="overflow: hidden; width: 90vw; text-overflow: ellipsis;">
                            {{ nstr(deep + 1, '&nbsp;&nbsp;&nbsp;&nbsp;') }} {{ child.label }} : {{ child.value }}
                        </div>
                    </div>
                </div>
                <!-- </div> -->
            </el-collapse-item>
        </el-collapse>

    </div>

</template>

<script setup lang="ts">
import { ENode } from './ERoleTress';

defineProps<{ enode: ENode, deep: number }>()

function nstr(n: number, s: string) {
    let r = '';
    for (let i = 0; i < n; i++) {
        r += s;
    }
    return r;
}


</script>